$(function () {
    let params = {
        // key	string	搜索关键词，可以为空，为空返回某类型所有文章
        key: '',
        // type	string	文章类型id，可以为空，为空返回所有类型文章
        type: '',
        // state	string	文章状态，草稿 ，已发布, 为空返回所有状态文章
        state: '',
        // page	number	当前页，为空返回第1页
        page: 1,
        // perpage	number	每页显示条数，为空默认每页6条
        perpage: 10
    }

    // 1 发送请求获取文章列表数据 /admin/article/query
    function articleQuery() {
        $.get('/admin/article/query', params, function (res) {
            // console.log(res)
            const html = template('trTpl', { list: res.data.data })
            $('tbody').html(html)


            renderPager(res.data.totalCount)
        })
    }

    // 2 发送请求获取文章列表数据 /admin/category/list
    function getCategoryList() {
        $.get('/admin/category/list', function (res) {
            let html = '<option value="">所有分类</option>'
            res.data.forEach(value => {
                html += `<option value="${value.id}">${value.name}</option>`

            })
            $('#selCategory').html(html)
        })
    }

    // 3 动态渲染页码组件
    function renderPager(count) {
        // console.log(count)
        //执行一个laypage实例
        layui.laypage.render({
            elem: 'pager',//注意，这里的 test1 是 ID，不用加 # 号
            count,//数据总数，从服务端得到
            limit: params.perpage,
            curr: params.page,

            jump(obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // params.page = obj.curr
                // console.log(obj.limit); //得到每页显示的条数
                if (!first) {
                    params.page = obj.curr
                    articleQuery()
                }
            }

        })
    }
    // 4 给筛选按钮做点击事件
    $('#btnSearch').click(function () {
        // 文章标题
        params.key = $('#aname').val()
        // 分类框
        params.type = $('#selCategory').val()
        // 状态框
        params.state = $('#selStatus').val()
        //    小bug优化 一旦 实现筛选功能 往往都需要 重置 页码 
        params.page = 1
        articleQuery()

    })
    // 5 给重置按钮做点击事件
    $('#btnReset').click(function () {
        params = { key: '', type: '', state: '', page: 1, perpage: 10 }
        // 文章标题
        $('#aname').val('')
        // 分类框
        $('#selCategory').val('')
        // 状态框
        $('#selStatus').val('')
        articleQuery()
    })
    // 6 实现删除按钮的删除功能 /admin/article/delete
    // 动态生成
    $('tbody').on('click', '.delete', function () {
        // console.log(2324)
        // 要注意this 指向的问题
        layer.confirm('是否确定删除', (index) => {
            layer.close(index)
            const id = $(this).parents('tr').data('id')
            // 发送请求 
            $.post('/admin/article/delete', { id }, function (res) {
                console.log(res)
                if (res.code === 200) {
                    articleQuery()
                }
            })
        })
    })


    articleQuery()
    getCategoryList()
})
